<html>
  <head>
    <title>HTML5 osifont</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>  
      @font-face {  
        font-family: osifont;
        src: url('osifont.ttf') format('truetype');  
      }
      body {
        font-family: osifont, comic-sans;
        -moz-font-feature-settings: "liga", "dlig";
        -ms-font-feature-settings: "liga", "dlig";
        -o-font-feature-settings: "liga", "dlig";
        -webkit-font-feature-settings: "liga", "dlig";
        font-feature-settings: "liga", "dlig";
      }
    </style>
  </head>
  <script>
  <!--
  function textareaChange(textarea) {
    var r = document.getElementById('rendering');
    var d = r.getElementsByTagName('div');
    for (var i=0; i<d.length; i++)
      d[i].innerHTML = textarea.value;
  }

  function onLoad() {
     var ta = document.getElementById('textarea');
     ta.focus();
     ta.select();
     ta.innerHTML = localStorage['html5_osifont_text'];
     textareaChange(ta);
  }

  function uniqueChars() {
    var s = document.getElementById('textarea').value;
    s = s + s.toUpperCase();
    var a=[]; 
    for (var i=0; i<s.length; i++) { 
      if (a.indexOf(s.charAt(i)) < 0) 
        a.push(s.charAt(i)); 
    }; 
    a.sort(); 
    return a.join('').trim();
  }
  -->
  </script>
  <body onload="onLoad()">
  
  <div style="float: right;">
    <div>
      <textarea id="textarea" style="width: 40em; height: 5em;" onkeyup="textareaChange(this)">Put your sample text here</textarea>
    </div>
    <a href="html5.php">pangrams</a> <button onclick="localStorage.setItem('html5_osifont_text', document.getElementById('textarea').value)">Remember text</button> [Ȩȩ] [Ȼȼ]
  </div>
  
  <div id="rendering">
    <div style="font-size: 48px;"></div>
    <!-- div style="font-size: 5px;"></div>
    <div style="font-size: 6px;"></div>
    <div style="font-size: 7px;"></div>
    <div style="font-size: 8px;"></div>
    <div style="font-size: 9px;"></div>
    <div style="font-size: 10px;"></div>
    <div style="font-size: 11px;"></div>
    <div style="font-size: 12px;"></div>
    <div style="font-size: 13px;"></div>
    <div style="font-size: 14px;"></div>
    <div style="font-size: 15px;"></div>
    <div style="font-size: 16px;"></div>
    <div style="font-size: 17px;"></div>
    <div style="font-size: 18px;"></div>
    <div style="font-size: 19px;"></div>
    <div style="font-size: 20px;"></div>
    <div style="font-size: 22px;"></div>
    <div style="font-size: 24px;"></div>
    <div style="font-size: 30px;"></div>
    <div style="font-size: 48px;"></div>
    <div style="font-size: 72px;"></div>
    <div style="font-size: 84px;"></div>
    <div style="font-size: 100px;"></div>
    <div style="font-size: 120px;"></div>
    <div style="font-size: 200px;"></div -->
  </div>

  </body>
</html>  
